<template>
  <div class="business-box">
    <section class="banner">
      <img src="/imgs/ywjs/pic_ywjs.png">
    </section>

    <section class="business">
      <Affix>
        <div class="business-affix">
          <div v-for="(item, index) in affixData" class="business-affix-item" ref="businessAffixItem">
            <span class="business-affix-item-index">{{ item.index }}</span>
            <span class="business-affix-item-text">{{ item.title }}</span>
          </div>
        </div>
      </Affix>

      <div class="title">
        <div class="title-cn">业务介绍</div>
        <div class="title-en">Business Introduction</div>
        <div class="title-line"></div>
      </div>
      <div class="wechat">
        <Carousel
          v-model="wechatValue"
          :dots="'none'" 
          :arrow="'never'"
          autoplay
          :autoplay-speed="3000"
          ref="wechatCarousel"
          @on-change="wechatChanged"
        >
          <CarouselItem v-for="(item, index) in wechatData" :key="index">
            <div class="wechat-item">
              <img :src="item.img" class="wechat-item-img">
              <div class="wechat-item-content">
                <div class="wechat-item-index">01</div>
                <div class="wechat-item-title">
                  {{ item.title }}
                </div>
                <div class="wechat-item-line"></div>
                <div class="wechat-item-desc">
                  {{ item.desc }}
                </div>
              </div>
            </div>
          </CarouselItem>
        </Carousel>
        <ul class="banner-indicators">
          <li class="banner-indicator" v-for="(item, index) in wechatData" :key="index">
            <button class="banner-button" ref="wechatIndicatorButton"></button>
          </li>
        </ul>
        <div class="banner-arrow">
          <div class="banner-arrow-left" @click="wechatClickArrow(-1)">
            <img src="/imgs/ywjs/btn_ywjj_left.png">
          </div>
          <div class="banner-arrow-right" @click="wechatClickArrow(1)">
            <img src="/imgs/ywjs/btn_ywjj_right.png">
          </div>
        </div>
      </div>

      <div class="integrate">
        <img src="/imgs/ywjs/pic_ywjj_02.png" class="integrate-img">
        <div class="integrate-content">
          <div class="integrate-index">02</div>
          <div class="integrate-title">
            物联网集成
          </div>
          <div class="integrate-line"></div>
          <div class="integrate-desc">
            我司共服务过100+位合作伙伴，涉及农业、制造业、医疗、教育等二十余个行业，并且支持CAN、串口、485、蓝牙、ZigBee、eMTC、LPWLAN等多种协议。过去所设计的智能水务、医疗saas系统、共享车位等物联网解决方案帮助客户进行智能化升级，驱动工作效率大幅提升。
          </div>
        </div>
      </div>

      <div class="wechat mobile">
        <Carousel
          v-model="mobileValue"
          :dots="'none'" 
          :arrow="'never'"
          autoplay
          :autoplay-speed="3000"
          ref="mobileCarousel"
          @on-change="mobileChanged"
        >
          <CarouselItem v-for="(item, index) in mobileData" :key="index">
            <div class="wechat-item">
              <img :src="item.img" class="wechat-item-img">
              <div class="wechat-item-content">
                <div class="wechat-item-index">03</div>
                <div class="wechat-item-title">
                  {{ item.title }}
                </div>
                <div class="wechat-item-line"></div>
                <div class="wechat-item-desc">
                  {{ item.desc }}
                </div>
              </div>
            </div>
          </CarouselItem>
        </Carousel>
        <ul class="banner-indicators">
          <li class="banner-indicator" v-for="(item, index) in mobileData" :key="index">
            <button class="banner-button" ref="mobileIndicatorButton"></button>
          </li>
        </ul>
        <div class="banner-arrow">
          <div class="banner-arrow-left" @click="mobileClickArrow(-1)">
            <img src="/imgs/ywjs/btn_ywjj_left.png">
          </div>
          <div class="banner-arrow-right" @click="mobileClickArrow(1)">
            <img src="/imgs/ywjs/btn_ywjj_right.png">
          </div>
        </div>
      </div>

      <div class="integrate system">
        <img src="/imgs/ywjs/pic_ywjj_04.png" class="integrate-img">
        <div class="integrate-content">
          <div class="integrate-index">04</div>
          <div class="integrate-title">
            系统定制开发
          </div>
          <div class="integrate-line"></div>
          <div class="integrate-desc">
            目前我司在ERP管理系统、CRM系统、WMS系统、OMS系统、OA系统等方面都有丰富的开发经验。曾帮方承、泰美、励齿等医疗类公司开发过ERP管理系统服务了1000+位供应商，从供应链范围去优化企业资源，优化现代企业运行模式，提高企业核心竞争力。 
          </div>
        </div>
      </div>
    </section>
    
  </div>
</template>

<script>
export default {
  data () {
    return {
      scroll: 0,
      wechatValue: 0,
      wechatTimer: null,
      wechatBtnDom: null,
      wechatData: [{
        img: '/imgs/ywjs/pic_ywjj_01.png',
        title: '微信活动',
        desc: '通过品牌定位分析、营销活动策划，量身定制图文资讯等系统化的流程帮助中国移动和中国电信的粉丝量分别从80w增长到400w，2w+ 增长至6w+，增长率高达300%以上，助力转化提速，营销提量'
      }, {
        img: '/imgs/ywjs/pic_ywjj_01.png',
        title: '微信活动2',
        desc: '通过品牌定位分析、营销活动策划，量身定制图文资讯等系统化的流程帮助中国移动和中国电信的粉丝量分别从80w增长到400w，2w+ 增长至6w+，增长率高达300%以上，助力转化提速，营销提量'
      }, {
        img: '/imgs/ywjs/pic_ywjj_01.png',
        title: '微信活动3',
        desc: '通过品牌定位分析、营销活动策划，量身定制图文资讯等系统化的流程帮助中国移动和中国电信的粉丝量分别从80w增长到400w，2w+ 增长至6w+，增长率高达300%以上，助力转化提速，营销提量'
      }],
      affixData: [{
        index: '01',
        title: '微信活动'
      }, {
        index: '02',
        title: '物联网集成'
      }, {
        index: '03',
        title: '移动端开发'
      }, {
        index: '04',
        title: '系统定制开发'
      }],
      width: 0,
      widthMobile: 0,
      mobileValue: 0,
      mobileTimer: null,
      mobileBtnDom: null,
      mobileData: [{
        img: '/imgs/ywjs/pic_ywjj_03.png',
        title: '移动端开发',
        desc: '支持多端定制，满足不同用户的不同需求。开发类型包括金融、教育、社交类、问卷等。在实习升项目中共有APP端、PC端、教师端、学生端、微信端等共7个入口，虽然入口较多，但数据相通，同步性好。'
      }, {
        img: '/imgs/ywjs/pic_ywjj_03.png',
        title: '移动端开发',
        desc: '支持多端定制，满足不同用户的不同需求。开发类型包括金融、教育、社交类、问卷等。在实习升项目中共有APP端、PC端、教师端、学生端、微信端等共7个入口，虽然入口较多，但数据相通，同步性好。'
      }]
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollPage)
    this.scrollPage()

    this.wechatChanged(0, 0)
    this.mobileChanged(0, 0)
  },
  methods: {
    scrollPage() {
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
      let item = this.$refs.businessAffixItem
      for(let i of item) {
        i.className = 'business-affix-item'
      }
      if(this.scroll < 1300 ) {
        this.addClass(item[0], 'is-active')
      } else if(this.scroll < 2000) {
        this.addClass(item[1], 'is-active')
      } else if(this.scroll < 2800) {
        this.addClass(item[2], 'is-active')
      } else {
        this.addClass(item[3], 'is-active')
      }
    },
    clickWechatIndicator(index) {
      // 点击banner指示器
      this.$refs.wechatCarousel.setActiveItem(index)
    },
    wechatChanged(oldIndex, index) {
      // banner 切换change事件
      let btns = this.$refs.wechatIndicatorButton
      for(let item of btns) {
        item.style.width = '0'
      }
      this.wechatBtnDom = btns[index]
      this.width = 0
      this.handleMouseEnter()
      this.wechatTimer = this.startInterval()
    },
    handleMouseEnter() {
      // 暂停banner指示器动画
      if (this.wechatTimer) {
        clearInterval(this.wechatTimer)
        this.wechatTimer = null
        this.width = 0
      }
    },
    startInterval() {
      // 定时器开启
      return setInterval(() => {
        this.width += 48 / (3000 / 100)
        this.wechatBtnDom.style.width = this.width + 'px'
        if(this.width > 48) {
          clearInterval(this.wechatTimer)
          this.wechatBtnDom.style.width = '0'
          this.width = 0
        }
      }, 100)
    },
    wechatClickArrow(val) {
      let oldVal = this.wechatValue
      let newVal = this.wechatValue + val
      if(newVal < 0) {
        this.wechatValue = this.wechatData.length - 1
      } else if(newVal >= this.wechatData.length) {
        this.wechatValue = 0
      } else {
        this.wechatValue = newVal
      }
      this.wechatChanged(oldVal, this.wechatValue)
    },

    clickMobileIndicator(index) {
      // 点击banner指示器
      this.$refs.mobileCarousel.setActiveItem(index)
    },
    mobileChanged(oldIndex, index) {
      // banner 切换change事件
      let btns = this.$refs.mobileIndicatorButton
      for(let item of btns) {
        item.style.width = '0'
      }
      this.mobileBtnDom = btns[index]
      this.widthMobile = 0
      this.handleMouseEnterMobile()
      this.mobileTimer = this.startIntervalMobile()
    },
    handleMouseEnterMobile() {
      // 暂停banner指示器动画
      if (this.mobileTimer) {
        clearInterval(this.mobileTimer)
        this.mobileTimer = null
        this.widthMobile = 0
      }
    },
    startIntervalMobile() {
      // 定时器开启
      return setInterval(() => {
        this.widthMobile += 48 / (3000 / 100)
        this.mobileBtnDom.style.width = this.widthMobile + 'px'
        if(this.widthMobile > 48) {
          clearInterval(this.mobileTimer)
          this.mobileBtnDom.style.widthMobile = '0'
          this.widthMobile = 0
        }
      }, 100)
    },
    mobileClickArrow(val) {
      let oldVal = this.mobileValue
      let newVal = this.mobileValue + val
      if(newVal < 0) {
        this.mobileValue = this.mobileData.length - 1
      } else if(newVal >= this.mobileData.length) {
        this.mobileValue = 0
      } else {
        this.mobileValue = newVal
      }
      this.mobileChanged(oldVal, this.mobileValue)
    },
    addClass(element, csName) {
      // 添加class
      if(!this.hasClass(element, csName)){
        element.className += ' ' + csName
      }
    },
    hasClass(element, csName) {
      if(element !== undefined) {
        return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)'))
      }
      return false
    }
  }
}
</script>

<style scoped>
.business-box {
  width: 100%;
  background-color: #fff;
}
.business {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
}
/*图钉*/
.business-affix {
  position: absolute;
  right: calc((100% - 1200px) / 2);
  /*top: -100px;*/
  display: inline-block;
  width: 420px;
  background-color: #0088DE;
}
.business-affix-item {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  color: #fff;
  transition: .5s;
}
.business-affix-item.is-active {
  background: rgba(0,0,0,.2);
}
.business-affix-item-index {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,.2);
  margin-right: 25px;
  font-size: 16px;
  line-height: 22px;
}
.business-affix-item-text {
  font-size: 16px;
  color: rgba(255,255,255,1);
  line-height: 22px;
}
/*over*/
.banner {
  width: 100%;
  max-height: 360px;
  overflow: hidden;
}
.banner img {
  width: 100%;
}
.business {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
}
.title {
  width: 1200px;
  margin: 75px 0 0 0;
}
.title .title-cn {
  font-size: 30px;
  color: rgba(51,51,51,1);
  line-height: 42px;
}
.title .title-en {
  font-size: 14px;
  color: rgba(103,103,103,1);
  line-height: 20px;
  margin-top: 12px;
}
.title .title-line {
  margin: 62px 0 62px 0;
  width: 1px;
  height: 32px;
  background: rgba(230,230,230,1);
}
.wechat {
  position: relative;
  width: 1200px;
  margin-bottom: 200px;
}
.wechat.mobile {
  width: 100%;
  padding: 200px 0 200px 0;
  padding-left: calc((100% - 1200px) / 2);
  padding-right: calc((100% - 1200px) / 2);
  background-color: #212734;
  margin-top: -100px;
  margin-bottom: 0;
}
.wechat-item {
  position: relative;
  width: 100%;
  padding: 40px 0 0 60px;
}
.mobile .wechat-item {
  padding: 0;
}
.wechat-item-content {
  width: 100%;
  height: 480px;
  padding: 60px 32px 0 620px;
  background-color: #212734;
}
.mobile .wechat-item-content {
  padding: 60px 32px 0 680px;
}
.wechat-item-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 640px;
  max-height: 420px;
}
.wechat-item-index {
  position: absolute;
  right: 32px;
  top: 71px;
  font-size: 64px;
  color: rgba(255,255,255,.1);
  line-height: 90px;
}
.wechat-item-title {
  font-size: 25px;
  color: rgba(255,255,255,1);
  line-height: 36px;
}
.wechat-item-line {
  width: 160px;
  height: 1px;
  background: rgba(255,255,255,0.2);
  margin: 43px 0 60px 0;
}
.wechat-item-desc {
  font-size: 16px;
  color: rgba(255,255,255,1);
  line-height: 24px;
}
.integrate {
  position: relative;
  width: 1200px;
  padding: 70px 587px 346px 0;
  z-index: 9;
}
.integrate.system {
  margin-top: -100px;
  padding: 233px 587px 346px 0;
}
.integrate-img {
  position: absolute;
  right: 0;
  top: 0;
  width: 420px;
  max-height: 640px;
}
.integrate-content {
  
}
.integrate-index {
  position: absolute;
  right: 587px;
  top: 35px;
  font-size: 64px;
  color: rgba(0,0,0,.1);
  line-height: 90px;
}
.integrate-title {
  font-size: 24px;
  color: rgba(24,24,24,1);
  line-height: 33px;
}
.integrate-line {
  width: 160px;
  height: 1px;
  background: rgba(230,230,230,1);
  margin: 48px 0;
}
.integrate-desc {
  font-size: 16px;
  color: rgba(102,102,102,1);
  line-height: 24px;
}
/*banner指示器*/
.banner-indicators {
  position: absolute;
  list-style: none;
  bottom: 48px;
  left: 140px;
  margin: 0;
  padding: 0;
  z-index: 2;
  width: 200px;
  display: flex;
  align-items: center;
}
.mobile .banner-indicators {
  left: auto;
  bottom: 200px;
}
.banner-indicator {
  display: inline-block;
  background-color: transparent;
  margin: 0 4px;
  cursor: pointer;
  width: 48px;
  height: 4px;
  background-color: rgba(255,255,255,0.48);
}
.banner-button {
  display: block;
  width: 0;
  height: 4px;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  /*transition: .3s;*/
}
/*over*/
.banner-arrow {
  position: absolute;
  right: 40px;
  bottom: 23px;
  display: flex;
}
.mobile .banner-arrow {
  right: calc((100% - 1200px) / 2 + 410px);
  bottom: 260px;
}
.banner-arrow-left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background: rgba(0,136,222,1);
  margin-right: 12px;
  cursor: pointer;
}
.banner-arrow-right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background-color: #212734;
  border: 1px solid rgba(255,255,255,.5);
  cursor: pointer;
}
.banner-arrow-left img,
.banner-arrow-right img {
  width: 24px;
  height: 24px;
}
</style>
